<template>
  <div>
    <NavHeader></NavHeader>
    <ProductParam></ProductParam>
    <div class="productParam">
      <div class="commodity">
        <div class="container">
          <swiper
            class="swiImgs"
            :options="swiperOption"
            v-if="commodity.length != 0"
          >
            <swiper-slide
              v-for="(item, index) in commodity"
              data-index="index"
              :key="index"
              class="item"
            >
              <img class="swiImg" :src="item" style="width: 600px" />
            </swiper-slide>
            <div class="swiper-scrollbar"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
      <div class="product">
        <div class="productInfo">
          <div class="goodsInfo">
            <div class="goodsName">红米Note 7</div>
            <div>
              相机全新升级 /960超慢动作/手持超级夜景/全球首款双频GPS
              /骁龙845处理器/红外人脸解锁/AI变焦双摄/三星 AMOLED 屏
            </div>
          </div>
          <div class="selfSupport">
            <div class="self">小米自营</div>
            <div class="price">
              <span>999元</span>
              <span>1999元</span>
            </div>
          </div>
          <div class="address">
            <div class="location">
              <img
                src="../assets/imgs/icon-loc.png"
                style="width: 20px; height: 20px"
              />
              <span>北京 北京市 朝阳区 安定门街道</span>
            </div>
            <div class="spots">有现货</div>
          </div>
          <div class="selectVersion">
            <div class="choose">选择版本</div>
            <div class="options">
              <div
                @click="changeChoise(0, $event)"
                :class="isClick ? 'choise' : ''"
              >
                6GB+64GB 全网通
              </div>
              <div
                @click="changeChoise(1, $event)"
                :class="isChoose ? 'choise' : ''"
              >
                4GB+64GB 移动4G
              </div>
            </div>
          </div>
          <div class="selectVersion">
            <div class="choose">选择颜色</div>
            <div class="options">
              <div class="choise">深空灰</div>
            </div>
          </div>
          <div class="redMi">
            <div>红米Note 7 {{ changeTxt }} 深灰色</div>
            <div>999元</div>
          </div>
          <div class="total">总计：999元</div>
          <div class="joinShopCart">加入购物车</div>
        </div>
      </div>
    </div>
    <NavFooter></NavFooter>
  </div>
</template>

<script>
import NavHeader from "../components/NavHeader.vue";
import NavFooter from "../components/NavFooter.vue";
import ProductParam from "../components/ProductParam.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
export default {
  name: "Detail",
  data() {
    const that = this;
    return {
      changeTxt: "6GB+64GB 全网通",
      isClick: true,
      isChoose: false,
      commodity: [
        require("../assets/imgs/detail/phone-1.jpg"),
        require("../assets/imgs/detail/phone-2.jpg"),
        require("../assets/imgs/detail/phone-3.jpg"),
        require("../assets/imgs/detail/phone-4.jpg"),
      ],
      imgIndex: 1,
      swiperOption: {
        //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        //循环
        loop: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        //滑动速度
        speed: 800,
        //滑动方向
        direction: "horizontal",
        //小手掌抓取滑动
        grabCursor: true,
        //滑动之后回调函数
        on: {
          slideChangeTransitionStart: function () {
            that.imgIndex = this.realIndex + 1; //获取轮播图片下标索引；这里有一个坑，之前网上找到的是用activeIndex，但后来网上说的是这个realIndex，原来activeIndex是swiper2.0的；而realIndex是swiper3.0的，（使用realIndex才实现了下标索引）
          },
        },
        //分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
      },
    };
  },
  created() {
    this.swiperOption.autoplay =
      this.commodity.length != 1
        ? {
            //控制只有一张图片的时候不自动轮播
            delay: 1500,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          }
        : false;
  },
  methods: {
    changeChoise(a, e) {
      console.log(e.target.innerText);
      this.changeTxt = e.target.innerText;
      if (a == 0) {
        this.isClick = true;
        this.isChoose = false;
      } else {
        this.isClick = false;
        this.isChoose = true;
      }
    },
  },
  components: {
    NavHeader,
    NavFooter,
    ProductParam,
    swiper,
    swiperSlide,
  },
};
</script>

<style lang="less" scoped>
.productParam {
  display: flex;
  align-items: center;
  justify-content: center;
  .commodity {
    width: 600px;
    margin-right: 60px;
  }
}
.product {
  width: 600px;
  .productInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goodsInfo {
      margin-top: 40px;
      margin-bottom: 30px;
      .goodsName {
        color: #333333;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
    }
    .goodsInfo div:last-child {
      color: #40404c;
    }
  }
  .selfSupport {
    border-bottom: 1px solid #ececec;
    padding-bottom: 20px;
    margin-bottom: 30px;
    .self {
      color: #ff933c;
      margin-bottom: 5px;
    }
    .price span:first-child {
      color: #ff6d22;
    }
    .price span:last-child {
      color: #a09f9d;
      text-decoration: line-through;
    }
  }
  .address {
    border: 2px solid #ececec;
    padding: 30px;
    background: #fafafa;
    margin-bottom: 10px;
    .location {
      display: flex;
      align-items: center;
      span {
        color: #999999;
        margin-left: 10px;
      }
    }
    .spots {
      color: #ff933c;
      margin: 10px 0 0 30px;
    }
  }
  .selectVersion {
    margin-top: 20px;
    .choose {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .options {
      display: flex;
      align-items: center;
      div {
        height: 40px;
        line-height: 40px;
        border: 2px solid #ececec;
        margin-right: 15px;
        padding: 10px 70px;
      }
      .choise {
        border: 2px solid #ff933c;
        color: #ff933c;
      }
    }
  }
  .redMi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0 20px 0;
  }
  .total {
    color: #ff6d22;
    font-weight: bold;
    font-size: 26px;
  }
  .joinShopCart {
    width: 150px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: #ff6d22;
    padding: 10px 20px;
    text-align: center;
    margin-top: 20px;
  }
}
</style>